<template>
  <div class="container-left">
    <div
      @drag="drag('drag')"
      @dragend="dragend('dragend')"
      class="droppable-element"
      draggable="true"
      unselectable="on"
    >
      Droppable Element (Drag me!)
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mouseXY: { x: null, y: null },
    };
  },
  mounted() {
    document.addEventListener(
      "dragover",
      (e) => {
        this.mouseXY.x = e.clientX;
        this.mouseXY.y = e.clientY;
      },
      false
    );
  },
  methods: {
    drag() {
      this.$emit("modelDrag", this.mouseXY);
    },
    dragend() {
      this.$emit("modelDragEnd", this.mouseXY);
    },
  },
};
</script>

<style scoped>
.container-left {
  width: 100%;
  height: 100vh;
}
.droppable-element {
  width: 150px;
  text-align: center;
  background: #fdd;
  border: 1px solid black;
  margin: 10px 0;
  padding: 10px;
}
</style>